<template>
  <div class="custom-date-picker">
    <div class="cdp-header" :class="show?'cdp-header-active':''" @click="show = !show">
      <div class="cd-left" :style="startTime != ''?'color: rgba(0,0,0,0.9);':'color: rgba(0,0,0,0.4);'">{{ startTime || '开始时间' }}</div>
      <div class="cdp-center">-</div>
      <div class="cdp-right" :style="endTime != ''?'color: rgba(0,0,0,0.9);':'color: rgba(0,0,0,0.4)'">{{ endTime || '结束时间' }}</div>
      <img src="@/assets/icon/icon-time-check.png" v-if="show == true" alt="">
      <img src="@/assets/icon/icon-time.png" v-else alt="">
    </div>
    <div class="cdp-body" v-if="show">
      <div class="cdp-item">
        <datePickerItem @change="startTimeFun" :time="startTime" ></datePickerItem> 
        <datePickerItem @change="endTimeFun" :time="endTime"></datePickerItem>
      </div>
      <div class="cdp-footer" style="margin-top: 10px; text-align: right;">
        <el-button type="" size="" @click="quxiao">取消</el-button>
        <el-button :type="startTimes == '' || endTimes == '' ? '':'primary'" :disabled="startTimes == '' || endTimes == ''" size="" @click="updata">ok</el-button>
      </div>
    </div>
    
  </div>
</template>

<script setup lang="ts">
  import datePickerItem from './datePickerItem.vue';
  import dayjs from 'dayjs';

  const emit = defineEmits(['change']);
  const show = ref(false);
  const quxiao = () => {
    show.value = false;
    // startTime.value = ''
    // endTime.value = ''
    // emit('change', [null, null]);
  };

  const startTime = ref('');
  const endTime = ref('');

  const startTimes = ref('');
  const endTimes = ref('');
  const updata = () => {

    const time1 = dayjs(startTimes.value);
    const time2 = dayjs(endTimes.value);

    if (time1.isAfter(time2)) {
      startTime.value = endTimes.value
      endTime.value = startTimes.value
    } else {
      startTime.value = startTimes.value
      endTime.value = endTimes.value
    }
    emit('change',[startTime.value, endTime.value]);
    show.value = false;

  };

  const startTimeFun = (time: string) => { 
    
    startTimes.value = dayjs(time).format('YYYY-MM-DD');
  };
   const endTimeFun = (time: string) => { 
   
    endTimes.value =  dayjs(time).format('YYYY-MM-DD');

  };
</script>

<style lang="scss" scoped>
  .custom-date-picker { 
    position: relative;
    .cdp-header { 
      width: 300px;
      background: #FFFFFF;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #DCDCDC; 
      padding:5px 12px ;
      display: flex;
      cursor: pointer;
      align-items: center;
      .cd-left { 
        width: 100px;
      }
      .cd-right{
        width: 100px;
      }
      .cdp-center{
        margin:0 5px;
      }
      img{
        margin-left: auto;
        width: 16px;
        height: 16px;
      }
    }
    .cdp-header-active{
      box-shadow: 0px 0px 0px 2px rgba(0,97,91,0.1);
      border: 1px solid #16ADA4;
    }
    .cdp-header:hover{
      box-shadow: 0px 0px 0px 2px rgba(0,97,91,0.1);
      border: 1px solid #16ADA4;
    }
    .cdp-body{
      position: absolute;
      top: 50px;
      z-index: 9999;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.10);
      border: 1px solid #e4e7ed;
      padding: 18px 18px 14px 18px;
      .cdp-item{
        display: flex;
        gap:20px;
        justify-content: center;
        align-items: center;
        border-bottom:  1px solid #E7E7E7;;
      }
    }
    .cdp-footer{
      padding-top: 7px;
      margin: 0px 0;
    }
  }

</style>
